<template>
    <div>
<!--        最近在看{{learnContent}}-->
<!--        {{subject_id}}-->
        <div v-if="learnContent && learnContent.videoLogs && learnContent.videoLogs.length">
            <div style="display: flex;border-bottom: 1px solid gray;padding: 10px 0px" v-for="item in learnContent.videoLogs">
                <img width="160" :src="item.coverURL" alt="">
                <div style="display: flex;flex-direction: column;width: 100%;margin-left:10px">
                    <p class="watch_title">{{item.name}}</p>
                    <p class='wathc_status'>已看 {{}},总时长{{item.duration}}</p>
                    <div style="display: flex;justify-content: flex-end">
                        <el-button style="text-align: right" @click="toVideo(item)">继续学习</el-button>
                    </div>
                </div>
            </div>
        </div>
        <el-empty v-else description="description" />
    </div>
</template>

<script>
    import {recentLatelyLearn} from "@/api/api";
    import {ref,watchEffect} from 'vue'
    import {useRouter} from "vue-router";
    export default {
        name: "recentWatch",
        props:{
            subject_id:{
                type:String
            }
        },
        setup(props){
            //最近在学内容
            let router = useRouter();
            let learnContent = ref({});
            let getRecentLatelyLearn = () =>{
                recentLatelyLearn({courseID:localStorage.getItem('activeCourse')}).then(res =>{
                    console.log('最近在学内容',res);
                    learnContent.value = res.data
                })
            }
            getRecentLatelyLearn();

            watchEffect(() =>{
                let activeCourse = props.subject_id;
                console.log('activeCourse',activeCourse);
                getRecentLatelyLearn()
            })

            let toVideo = (item) =>{
                console.log(item)
                router.push({
                    name: 'VideoPlayer',
                    params: {
                        subject_id: localStorage.getItem('activeCourse'),
                        subject_name: localStorage.getItem('activeCourseName'),
                        id: item.id,
                        chapterID:item.subjectID
                    }
                })
            }
            return{
                toVideo,
                learnContent
            }
        }
    }
</script>

<style scoped>
.watch_title{
    font-weight: bold;
}
.wathc_status{
    font-size:12px;
    color: rgba(153, 153, 153, 1);
    /* margin-top:50px */
}
</style>
